<!--
 * @Author: weikang
 * @Description:
 * @Date: 2024-01-21 16:34:04
 * @LastEditTime: 2024-06-01 12:41:58
 * @FilePath: \env-manager-pc\src\views\data_query\powers\powers.detail.vue
-->
<script setup lang="ts">
import dayjs from 'dayjs'
import lineChart from './components/lineChart.vue'
import dataQueryApi from '@/api/modules/data.query'
import type { PolluteErrRow } from '@/api/modules/types/data.query'
import useKeepAliveStore from '@/store/modules/keepAlive'
import { repaceUrl } from '@/utils'

const keepAliveStore = useKeepAliveStore()

onBeforeRouteLeave((to) => {
  if (to.name !== 'data-powers-list') {
    keepAliveStore.remove('DataPowersList')
  }
})
// const entStore = useEntStore()

const cwRef = ref()
const activeName = ref('chart')

const markerIDs = [8000]
const route = useRoute()
const deviceInfo: PolluteErrRow = JSON.parse(sessionStorage.getItem('PolluteErrRow') || '{}')
const deviceId = ref(route.params.id as string)
// const type = route.query.type as DeviceType
const loading = ref(false)
const tableData = ref([])

function currentChange(val: any) {
  if (val.ObjID) {
    repaceUrl(`/data-query/powers/electric/${val.ObjID}`, {
      type: val.type,
    })
    deviceId.value = val.ObjID
    getErrorData()
  }
}
const currentTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'))

const startTime = computed(() => {
  return dayjs(currentTime.value).format('YYYY-MM-DD')
})
const endTime = computed(() => {
  return dayjs(currentTime.value).add(1, 'day').format('YYYY-MM-DD')
})

function changeDay(type: string) {
  if (type === 'next') {
    currentTime.value = dayjs(currentTime.value).add(1, 'day').format('YYYY-MM-DD HH:mm:ss')
  }
  else {
    currentTime.value = dayjs(currentTime.value).subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss')
  }
  getErrorData()
}

function changeTime(value: any) {
  currentTime.value = value
  getErrorData()
}

const chartData = ref<any>({})

function getErrorData() {
  loading.value = true
  chartData.value = {}
  dataQueryApi.GetElectricTS({
    deviceObjIDs: [deviceId.value],
    markerIDs,
    startTime: startTime.value,
    endTime: endTime.value,
  }).then((res) => {
    loading.value = false
    const { Columns, Datas, UpdateTimes } = res as any
    const timeLine = Columns
    const datas = Datas[deviceId.value]
    const currentUpdateTime = UpdateTimes[deviceId.value]
    tableData.value = timeLine.map((item: any, index: number) => {
      const row: any = {
        Time: item.substring(11),
        UpdateTime: currentUpdateTime[index],
        realTime: item,
      }
      markerIDs.forEach((id) => {
        const value = datas[id][index] === null ? '--' : datas[id][index]
        row[String(id)] = value
        let currentData = []
        if (!chartData.value[String(id)]) {
          chartData.value[String(id)] = []
        }
        else {
          currentData = chartData.value[String(id)]
        }
        currentData.push({
          time: item,
          value: datas[id][index],
        })
      })
      return row
    })

    nextTick(() => {
      cwRef.value?.refresh()
    })
  }, () => {
    loading.value = false
  })
}

getErrorData()
</script>

<template>
  <PageMain>
    <div class="flex">
      <div class="mr-20px w-300px flex-shrink-0 b-r-1px b-r-#EBEEF5 b-r-solid pr-10px">
        <EntDeviceTree :ent-id="deviceInfo.EntObjID" :device-id="deviceId" @current-change="currentChange" />
      </div>
      <div class="flex-grow-1 overflow-x-hidden">
        <div>
          <el-date-picker
            v-model="currentTime"
            type="date"
            value-format="YYYY-MM-DD HH:mm:ss"
            @change="changeTime"
          />
          <el-button-group class="ml-10px">
            <el-button type="primary" @click="changeDay('prev')">
              前一天
            </el-button>
            <el-button type="primary" @click="changeDay('next')">
              后一天
            </el-button>
          </el-button-group>
        </div>
        <div class="mt-10px">
          <el-tabs
            v-model="activeName"
            type="card"
          >
            <el-tab-pane label="电量曲线" name="chart">
              <lineChart
                ref="cwRef"
                v-loading="loading"
                :table-data="chartData"
                :marker-i-ds="markerIDs"
              />
            </el-tab-pane>
            <el-tab-pane label="数据表" name="table">
              <div v-auto-height="40">
                <vxe-table
                  height="100%"
                  :data="tableData"
                  :loading="loading"
                  auto-resize border
                  :row-config="{ isCurrent: true }"
                >
                  <VxeColumn type="seq" title="序号" width="80" />
                  <VxeColumn field="Time" title="时间" min-width="150" />
                  <VxeColumn :field="String(markerIDs[0])" title="电量" min-width="100" />
                </vxe-table>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </PageMain>
</template>
